<template>
  <div class="container">
    <!-- 入库类型汇总图表 -->
    <div class="chart-section">
      <h3>入库类型汇总</h3>
      <bar-chart :data="inTypeData" />
    </div>
    
    <!-- 出库类型汇总图表 -->
    <div class="chart-section">
      <h3>出库类型汇总</h3>
      <bar-chart :data="outTypeData"  />
    </div>

        <el-row :gutter="20" class="action-row">
      <el-col :span="24">
        <el-button>导出</el-button>
        <el-button>刷新</el-button>
      </el-col>
    </el-row>

    <div class="table-container">
      <el-table :data="tableData" border style="width: 100%">
        <!-- 固定列 -->
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="productCode" label="货品编号" />
        <el-table-column prop="productName" label="货品名称" />
        <el-table-column prop="specification" label="规格型号" />
        <el-table-column prop="productType" label="货品类型" />

        <!-- 入库部分 -->
        <el-table-column label="入库">
          <el-table-column prop="inStock.transfer.quantity" label="调拨入库：数量" />
          <el-table-column prop="inStock.transfer.amount" label="金额" />
          <el-table-column prop="inStock.initial.quantity" label="期初入库：数量" />
          <el-table-column prop="inStock.initial.amount" label="金额" />
          <el-table-column prop="inStock.other.quantity" label="其他入库：数量" />
          <el-table-column prop="inStock.other.amount" label="金额" />
          <el-table-column label="合计">
            <template #default="scope">
              <div class="total-cell">
                <span>数量: {{ getInTotalQuantity(scope.row) }}</span>
                <span>金额: {{ getInTotalAmount(scope.row) }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 出库部分 -->
        <el-table-column label="出库">
          <el-table-column prop="outStock.sale.quantity" label="销售出库：数量" />
          <el-table-column prop="outStock.sale.amount" label="金额" />
          <el-table-column prop="outStock.transfer.quantity" label="调拨出库：数量" />
          <el-table-column prop="outStock.transfer.amount" label="金额" />
          <el-table-column prop="outStock.loss.quantity" label="盘亏出库：数量" />
          <el-table-column prop="outStock.loss.amount" label="金额" />
          <el-table-column prop="outStock.return.quantity" label="退货出库：数量" />
          <el-table-column prop="outStock.return.amount" label="金额" />
          <el-table-column prop="outStock.other.quantity" label="其他出库：数量" />
          <el-table-column prop="outStock.other.amount" label="金额" />
          <el-table-column label="合计">
            <template #default="scope">
              <div class="total-cell">
                <span>数量: {{ getOutTotalQuantity(scope.row) }}</span>
                <span>金额: {{ getOutTotalAmount(scope.row) }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import BarChart from './BarChart.vue';

export default {
  components: { BarChart },
  data() {
    return {
      activeName: 'inType',
      inTypeData: [
        { type: '进货入库', value: 20 },
        { type: '生产入库', value: 100 },
        { type: '退货入库', value: 150 },
        { type: '盘盈入库', value: 110 },
        { type: '调拨入库', value: 70 },
        { type: '期初入库', value: 120 },
        { type: '其他入库', value: 110 },
        { type: '其他入库2', value: 140 },
      ],
      outTypeData: [
        { type: '销售出库', value: 30 },
        { type: '调拨出库', value: 100 },
        { type: '盘亏出库', value: 150 },
        { type: '退货出库', value: 110 },
        { type: '其他出库', value: 70 },
        { type: '其他出库2', value: 120 },
        { type: '其他出库3', value: 100 },
        { type: '其他出库4', value: 140 },
      ],
      tableData: Array(8).fill().map((_, i) => ({
        productCode: `HPDH240${i+3}`,
        productName: i === 0 ? '苹果手机' : `商品${i+1}`,
        specification: '0.00',
        productType: '商品类型',
        inStock: {
          transfer: { quantity: 50, amount: 500.00 },
          initial: { quantity: 50, amount: 500.00 },
          other: { quantity: 50, amount: 500.00 },
        },
        outStock: {
          sale: { quantity: 50, amount: 500.00 },
          transfer: { quantity: 50, amount: 500.00 },
          loss: { quantity: 50, amount: 500.00 },
          return: { quantity: 50, amount: 500.00 },
          other: { quantity: 50, amount: 500.00 },
        },
      })),
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getInTotalQuantity(row) {
      return [
        row.inStock.transfer.quantity,
        row.inStock.initial.quantity,
        row.inStock.other.quantity
      ].reduce((sum, val) => sum + val, 0);
    },
    getInTotalAmount(row) {
      return [
        row.inStock.transfer.amount,
        row.inStock.initial.amount,
        row.inStock.other.amount
      ].reduce((sum, val) => sum + val, 0);
    },
    getOutTotalQuantity(row) {
      return [
        row.outStock.sale.quantity,
        row.outStock.transfer.quantity,
        row.outStock.loss.quantity,
        row.outStock.return.quantity,
        row.outStock.other.quantity
      ].reduce((sum, val) => sum + val, 0);
    },
    getOutTotalAmount(row) {
      return [
        row.outStock.sale.amount,
        row.outStock.transfer.amount,
        row.outStock.loss.amount,
        row.outStock.return.amount,
        row.outStock.other.amount
      ].reduce((sum, val) => sum + val, 0);
    },
  },
};
</script>

<style scoped>
.container {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.action-row {
  margin-bottom: 20px;
  text-align: left;
}
.table-container {
  margin-top: 20px;
    overflow-x: auto; /* 添加横向滚动 */
  white-space: nowrap; 
}
:deep(.el-table__cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

:deep(.el-table) {
  min-width: max-content;
}

.total-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.total-cell span {
  margin: 2px 0;
}
</style>